<template>
  <el-dialog
    :visible="visible"
    :title="isUpdate ? '编辑' : '新增'"
    @close="visible = false"
  >
    <el-form class="form">
      <el-form-item label="图片">
        <ImageUpload
          v-model="formData.img"
          @setImage="setImage"
        />
      </el-form-item>
      <el-form-item label="公司名称">
        <el-input v-model="formData.companyName" />
      </el-form-item>
      <el-form-item label="联系人">
        <el-input v-model="formData.contacts" />
      </el-form-item>
      <el-form-item label="联系人电话">
        <el-input v-model="formData.contactPhone" />
      </el-form-item>
      <el-form-item label="电子邮箱">
        <el-input v-model="formData.email" />
      </el-form-item>
      <el-form-item label="省份">
        <el-select
          v-model="province"
          clearable
          @change="changeProvince()"
        >
          <el-option
            v-for="region in provinceList"
            :key="region.id"
            :value="region.id"
            :label="region.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="城市">
        <el-select
          v-model="city"
          clearable
          @change="changeCity()"
        >
          <el-option
            v-for="region in cityList"
            :key="region.id"
            :value="region.id"
            :label="region.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="区域">
        <el-select
          v-model="region"
          clearable
        >
          <el-option
            v-for="region in regionList"
            :key="region.id"
            :value="region.id"
            :label="region.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input
          v-model="formData.detail"
          clearable=""
        />
      </el-form-item>
      <el-form-item label="年产量">
        <el-input v-model="formData.annualOutput" />
      </el-form-item>
      <el-form-item label="年销量">
        <el-input v-model="formData.annualSell" />
      </el-form-item>
      <el-form-item label="主要产品">
        <el-input v-model="formData.mainProducts" />
      </el-form-item>
      <el-form-item label="公司网址">
        <el-input v-model="formData.websiteAddress" />
      </el-form-item>
    </el-form>
    <el-button @click="visible = false">取 消</el-button>
    <el-button
      type="primary"
      @click="confirm"
    >确 定</el-button>
  </el-dialog>
</template>

<script>
import { getCompanyById, saveCompany, updateCompany } from '@/api/company'
import { listByPid, getRegionById } from '@/api/system/region'
import ImageUpload from '@/components/Upload/ImageUpload'
export default {
  components: { ImageUpload },
  data() {
    return {
      visible: false,
      isUpdate: false,
      formData: {
        id: '',
        companyName: '',
        contacts: '',
        contactPhone: '',
        detail: '',
        areaCode: '',
        img: '',
        email: '',
        annualOutput: '',
        annualSell: '',
        mainProducts: '',
        websiteAddress: ''
      },
      province: '',
      city: '',
      region: '',
      provinceList: [],
      cityList: [],
      regionList: [],
      categoryList: []
    }
  },
  methods: {
    async init(id) {
      listByPid(1).then(res => {
        this.provinceList = res.data
      })
      this.visible = true
      this.province = ''
      this.city = ''
      this.region = ''
      this.regionList = []
      this.cityList = []
      if (id != null) {
        this.isUpdate = true
        const data = await getCompanyById(id)
        this.formData = data.data
        if (this.formData.areaCode) {
          getRegionById(this.formData.areaCode).then(res => {
            const regionData = res.data
            if (regionData) {
              const pids = regionData.pids
              const regions = pids.split(',')
              if (regions.length > 1) {
                this.province = regions[1]
                this.changeProvince()
              }
              if (regions.length > 2) {
                this.city = regions[2]
                this.changeCity()
              }
              if (regions.length > 3) {
                this.region = regions[3]
              }
            }
          })
        }
      } else {
        this.isUpdate = false
        this.formData = {
          id: '',
          companyName: '',
          contacts: '',
          contactPhone: '',
          detail: '',
          areaCode: '',
          img: '',
          email: '',
          annualOutput: '',
          annualSell: '',
          mainProducts: '',
          websiteAddress: ''
        }
      }
    },
    setImage(imageUrl) {
      this.formData.img = imageUrl
    },
    changeProvince() {
      this.cityList = []
      this.regionList = []
      this.city = ''
      this.region = ''
      if (this.province) {
        listByPid(this.province).then(res => {
          this.cityList = res.data
        })
      }
    },
    changeCity() {
      this.regionList = []
      this.region = ''
      if (this.city) {
        listByPid(this.city).then(res => {
          this.regionList = res.data
        })
      }
    },
    confirm() {
      if (this.region) {
        this.formData.areaCode = this.region
      } else if (this.city) {
        this.formData.areaCode = this.city
      } else if (this.province) {
        this.formData.areaCode = this.province
      }
      if (this.isUpdate) {
        this.handleConform(updateCompany, this.formData)
      } else {
        this.handleConform(saveCompany, this.formData)
      }
    },
    handleConform(operation) {
      operation(this.formData).then(response => {
        if (response.statusCode == 20000) {
          this.refresh()
          this.visible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '发生错误，操作失败',
            type: 'warning'
          })
        }
      })
    },
    refresh() {
      this.$emit('refresh')
    }
  }
}
</script>

<style>
.form {
  margin-bottom: 20px;
}
</style>
